<template>
    <div class="content">
        <div class="left">
            <tree :treeData="treeData" @sendData="getData" />
        </div>
        <div class="main">
            <div class="el-card" v-for="item in dataList" :key="item.id">
                <div class="lables" @click="to(item)">
                    <div>
                        {{ item.sensor_name }}
                    </div>
                    <div>
                        {{ item.temperature !== null ? item.temperature + '℃' : '暂无数据' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import tree from './tree.vue'
export default {
    data() {
        return {
            treeData: [],
            sensorInfo: null,
            dataList: [],
        }
    },
    components: {
        tree,
    },
    methods: {
        getTree() {
            requestApi('post', 'diagnosis/tree', {}, true).then((res) => {
                if (res.data.code == 0) {
                    this.treeData = res.data.data
                }
            })
        },

        // 获取树节点点击 节点
        getData(e) {
            let { type, value } = e
            requestApi('post', `diagnosis/temperature`, { type, id: value }, true).then((res) => {
                this.dataList = res.data.data
            })
        },
        to(val) {
            this.$router.push(`/index/devicedetails?device_id=${val.device_id}&time=${val.time}&sensor_id=${val.id}&key=temperature`)
        },
    },
    created() {
        this.getTree()
    },
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;

    .left {
        width: 280px;
        height: 100%;
        float: left;
    }

    .main {
        width: calc(100% - 288px);
        height: 100%;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(auto-fill, 160px);
        grid-template-rows: 55px;
        row-gap: 5px;
        overflow-y: auto;
        padding: 10px 0;

        .el-card {
            background-color: rgb(14, 33, 74) !important;
            backdrop-filter: blur(3px); //毛玻璃属性
            color: white;
            border: 1px solid #007bff !important;
            height: 40px;
            width: 140px;
            padding: 5px;
            overflow: hidden;
            transition: all 0.4s;
            position: relative;
            cursor: pointer;
            .lables {
                display: flex;
                flex-direction: column;
                height: 100%;
                color: #00e4ff;
                div {
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                }
            }
        }

        .el-card:hover .details_btn {
            transform: translate(-50%, 0);
        }

        .el-card:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%) !important;
            -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -4px, 0);
            border: 1px solid #1cf4ff !important;
            box-shadow: 0 0 1rem rgba(28, 244, 255, 0.5) !important;
        }
    }
}
</style>
